<!--
 * @Author: zhoulei0232
 * @Date: 2022-12-08 00:37:02
 * @LastEditTime: 2023-04-17 23:40:27
 * @LastEditors: zhoulei0232
 * @Description: 
-->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="店铺规则" name="1">
        <Editor v-model="tabJson1.txt" />
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" class="top-right-btn">
            <el-button
              type="primary"
              plain
              @click="handleSubmit()"
              v-hasPermi="['business:rules:edit']"
              >提交</el-button
            >
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="加装规则" name="2">
        <Editor v-model="tabJson2.txt" />
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" class="top-right-btn">
            <el-button
              type="primary"
              plain
              @click="handleSubmit()"
              v-hasPermi="['business:rules:edit']"
              >提交</el-button
            >
          </el-col>
        </el-row></el-tab-pane
      >
      <!-- <el-tab-pane label="会员规则" name="3">
        <Member />
      </el-tab-pane> -->
      <el-tab-pane label="集市规则" name="4">
        <Editor v-model="tabJson4.txt" />
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" class="top-right-btn">
            <el-button
              type="primary"
              plain
              @click="handleSubmit()"
              v-hasPermi="['business:rules:edit']"
              >提交</el-button
            >
          </el-col>
        </el-row></el-tab-pane
      >
    </el-tabs>
  </div>
</template>

<script setup name="Rules">
import Editor from "@/components/QuillEditor/index.vue";
 
import { listRules, updateRules } from "@/api/business/rules";

const { proxy } = getCurrentInstance();
const pageList = ref([]);
const loading = ref(true);

const activeName = ref("1");
const data = reactive({
  tabJson1: {
    // 店铺规则
    rules_id: 1,
    rules_name: "店铺规则",
    txt: "",
  },
  tabJson2: {
    // 加装规则
    rules_id: 2,
    rules_name: "加装规则",
    txt: "",
  },
  tabJson4: {
    // 集市规则
    rules_id: 4,
    rules_name: "集市规则",
    txt: "",
  },
});

const { tabJson1, tabJson2, tabJson4 } = toRefs(data);
// 提交
function handleSubmit() {
  if (activeName.value == 1) {
    updateRules(data.tabJson1).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    });
  } else if (activeName.value == 2) {
    updateRules(data.tabJson2).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    });
  } else if (activeName.value == 4) {
    updateRules(data.tabJson4).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    });
  }
}
/** 查询列表 */
function getList() {
  loading.value = true;
  listRules().then((response) => {
    pageList.value = response.data;
    // 渲染数据用
    renderData();
    loading.value = false;
  });
}
/** 数据细分 */
function renderData() {
  pageList.value.forEach((item) => {
    if (item.rules_id == 1) {
      data.tabJson1 = {
        ...data.tabJson1,
        ...item,
      };
    } else if (item.rules_id == 2) {
      data.tabJson2 = {
        ...data.tabJson2,
        ...item,
      };
    } else if (item.rules_id == 4) {
      data.tabJson4 = {
        ...data.tabJson4,
        ...item,
      };
    }
  });
}

getList();
</script>
<style lang="scss" scoped>
.mb8 {
  margin-top: 20px;
}
</style>
